<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>角色管理</title>
</head>
<body>
<div class="container">
    <h2 class="mt-4">角色列表</h2>
    <a href="/RoleController/roles/new" class="btn btn-primary mb-3">创建新角色</a>
    <table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th>ID</th>
        <th>角色名称</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="role : ${roles}">
        <td th:text="${role.id}"></td>
        <td th:text="${role.roleName}"></td>
        <td th:text="${role.description}"></td>
        <td>
                <a th:href="@{/RoleController/roles/edit/{id}(id=${role.id})}" class="btn btn-sm btn-info">编辑</a>
                <a th:href="@{/RoleController/roles/{id}(id=${role.id})}" onclick="return confirm('确定删除该角色？')" class="btn btn-sm btn-danger">删除</a>
        </td>
    </tr>
    </tbody>
</table>
</div>

<script src="/webjars/bootstrap/dist/js/bootstrap.min.js"></script>


<link rel="stylesheet"
      href="/webjars/bootstrap/dist/css/bootstrap.min.css">


<script src="/webjars/jquery/dist/jquery.min.js"></script>
</body>
</html>